layui.use(['layer', "form"], function () {
  // ************************************************判断本地是否有token
  // 没有token的时候
  if (localStorage.getItem("token") == null) {
    location.href = "/login.html"
  }
  // 【！！！！！以后有需求：必须拆分三个小问题：
  //      用户对谁？发生什么行为？很多谁它怎么了？
  //  】
  // 需求：用户输入完，按下回车，有个条内容就显示在下面；
  // 分析：当用户按完键盘 enter的时候，配合用户动作做一些反应；
  //    1.用户按键盘：

  //  引入layer模块
  let layer = layui.layer;
  $(".new-todo").on("keydown", function (e) {
    //  2.键盘码：事件对象。e.keyCode
    //  3.当13的时候特别对待
    if (e.keyCode == 13) {
      // 当用户敲击键盘时就说明 输入完成要发布啦 这是先获取到 输入的内容
      // 4.页面有反应：用户输入的内容有放入下方；
      //    4.1 获取用户输入输入框的内容
      let val = $(".new-todo").val();
      //  在这阔以加上一个判断
      if (val.trim() == '') {
        // 提示用户输入不能为空哈 使用layer弹窗
        layer.msg('内容不能为空')
        return
      }
      // 再将数据上传到数据 柜中
      $.ajax({
        type: 'post',
        // 他只是做了限制但是并没有说可以不带 
        url: '/todo/add',
        data: {
          content: val,
          isdone: 0 /* 1的话就是默认选中的状态 */
        },
        success: function (res) {
          layer.msg(res.message)
          // 再添加成功的同时获取列表
          lis()
        }
      })
      // list 查询列表项
      function lis() {
        $.ajax({
          type: 'get',
          url: '/todo/list',
          success: function (res) {
            layer.msg(res.message)
            // console.log(res.data) 拿到数据库的值再 给它进行渲染到页面中
            let srt = ''
            // 每次先将上次输入的清空再填入本次输入的
            $("ul").html(srt);
            res.data.forEach(item => {
              srt += `<li class="${item.isdone?'completed':""}">
                      <div class="view">
                     <input class='toggle' type="checkbox"${item.isdone?'checked':''} myid="${item.id}"         myisdone="${item.isdone}">
                     <label>${item.content}</label>
                     <button class="destroy" myid="${item.id}"></button>
                       </div>
                     <input class="edit" value="Create a TodoMVC template" myid="${item.id}">
                     </li>`
            });
            // 再把它加到父元素中
            $('ul').html(srt)
          }
        })
      }
      lis()
      // //    4.2 把上面值设置到DOM节点内部，然后DOM节点内部添加到ul内
      // //       4.2.1 把上面值 val
      // //       4.2.2 创建dom    【全新JQ对象! 不能用""原因，不能回车,双引号半路成对！】
      // let li = $(`<li>
      //             <div class="view">
      //               <input class='toggle' type="checkbox">
      //               <label>${val}</label>
      //               <button class="destroy"></button>
      //             </div>
      //             <input class="edit" value="Create a TodoMVC template">
      //           </li>`);

      // //       4.2.3 添加到ul   【需要记住语法：添加语法 父级JQ.append(新JQ);    JQ.prepend(新JQ)   兄弟元素.before()  after】
      // $("ul").append(li);

      // //   4.3  清空   【遇到错误：先看控制台！如果没有错误的时候，加上某些代码后，出现了错误！】
      // // val = ""; 不生效  清空的时个复印件！
      // // $(".new-todo").val() = ""; 这样语法无效 不对
      $(".new-todo").val("") //  【记忆：JQ.val()没有参数代表获取。有值代表设置！.text()  .html()】
    }
  });

  // 需求：用户对x 点击chick后，有li消失
  // 步骤：
  //    1. 给x添加点击：不能直接添加！【事件委托：委托，我不要哨兵，派给父级！事件默认在冒泡阶段执行！】
  $("ul").on("click", ".destroy", function () {
    //  2.谁谁谁怎么了？li被删了！
    //     2.1 当前点x 对应 li  
    //     2.2 被干掉
    //       【当前: this   e.target e.currentTarget 记住！！】
    //       【意见：vue语法  7.30】
    // 拿到自定义的属性哈
    let id = $(this).attr('myid')
    $.ajax({
      type: 'get',
      // 其实后端设计接口时候如果是动态的话而且是get请求,到前端这边在后面直接拼接id就好啦
      url: '/todo/del/' + id,
      success: function (res) {
        layer.msg(res.message)
      }
    })
    $(this).parents("li").remove();
  });
  //////////////////////////////////////////////////////// 需求：用户对 圈 点击click后，样式改变！
  $("ul").on("click", ".toggle", function () {
    // ******************************************************// 更新小圆圈
    let ID = $(this).attr('myid')
    //  在这就使用三元表达式 一代表选中 0代表未被选中
    let done = $(this).attr('myisdone') == 1 ? 0 : 1
    $.ajax({
      type: 'post',
      url: '/todo/edit',
      data: {
        id: ID,
        isdone: done
      },
      success: function (res) {
        layer.msg('更改状态成功')
      }
    })
    //       【样式操作：样式四个方法】
    $(this).parents("li").toggleClass("completed");
  });

  // 需求：用户对 中间文字 双击 ，当前整个li添加一个样式 editng
  //                             中间文字----->跑到了新出来input
  // 步骤：
  //     1.
  $("ul").on("dblclick", "label", function () {
    // 1.给父级添加类名
    $(this).parents("li").addClass("editing");

    // 2.中间文字  跑到  了新出来input
    let str = $(this).text(); // 【回扣：记忆不牢,查询筛选】

    // 3.找父级下一个兄弟   
    let val = $(this).parent().next().val(str);

  });

  // 需求： 用户对谁？发生什么行为？很多谁它怎么了？用户对input，失去焦点行为，li去掉样式
  //                                                                         输入框  跑到 文字部分
  $("ul").on("blur", ".edit", function () {
    // 1.li去掉样式
    $(this).parent().removeClass("editing");

    // 2. 输入框的值  跑到  文字部分
    let str = $(this).val();
    $(this).prev().find("label").text(str);
    // 拿到它的再次需要修改的内容
    let val = $(this).val()
    // 再拿到自定义的属性值 具体是要修改那一条数据
    let id = $(this).attr('myid')
    if (val.trim() == '') {
      layer.msg('内容不能为空')
      return
    }
    // 在传入到数据中
    $.ajax({
      type: 'post',
      url: '/todo/edit',
      data: {
        content: val,
        id: id /*在创建标签的时候就绑定上数组中大id */
      },
      success: function (res) {
        layer.msg(res.message)
        lis()
      }
    })
  })

})










//    
//